<template>
  <div class="md-current">
    <div class="md-current-container">
      <div class="md-swiper-box">
        <md-swiper :swiperData="swiperInfo" />
      </div>
      <div class="md-goods-info-box" v-if="infoLoading">
        <div class="md-goods-info-list" v-for="item in productData" :key="item.productId">
          <el-skeleton class="md-goods-info-item" :loading="infoLoading" animated>
            <template slot="template">
              <div class="class-panel-loading">
                <div class="item-left">
                  <el-skeleton-item variant="image" style="width: 100%; height: 139px;" />
                </div>
                <div class="item-right">
                  <el-skeleton-item variant="h3" style="width: 80%;" />
                  <el-skeleton-item variant="h5" style="width: 80%;" />
                  <div style="display: flex; align-items: center; justify-items: space-between; margin-top: 10px; height: 16px;">
                    <el-skeleton-item variant="text" style="width: 30%; margin-right: 16px;" />
                    <el-skeleton-item variant="text" style="width: 30%;" />
                  </div>
                </div>
              </div>
            </template>
          </el-skeleton>
        </div>
      </div>
      <div class="md-goods-info-box" v-else>
        <ul class="md-goods-info-list">
          <li class="md-goods-info-item" v-for="item in productData" :key="item.productId">
            <div class="item-left">
              <md-swiper :height="350" :swiperData="item.picture" />
            </div>
            <div class="item-right">
              <p class="item-title">{{ item.title ? item.title : '--' }}</p>
              <p class="item-description">{{ item.description ? item.description : '' }}</p>
              <div class="tag-box">
                <ul>
                  <li class="free-trial" @click="handleApply(item)">
                    <a href="javascript:;">Free Trial</a>
                  </li>
                  <li>$<b>{{ item.seliingPrice ? item.seliingPrice : '--' }}</b>.00</li>
                  <li>count: <i>{{ item.quantity ? item.quantity : '--' }}</i></li>
                </ul>
                <!-- <p class="total-num">共 1650人 参与</p> -->
              </div>
              <!-- <p class="item-countdown">结束时间：6天4小时48分钟</p> -->
            </div>
          </li>
        </ul>
      </div>
      <div class="pages">
        <el-pagination :current-page="search.pageIndex" :page-size="search.pageSize" layout="total, prev, pager, next, jumper" :total="productTotal"></el-pagination>
      </div>
    </div>
    <md-apply-product-dialog :flag="flag" :dialogInfo="dialogInfo" @close="flag = false"></md-apply-product-dialog>
  </div>
</template>

<script>
export default {
  name: 'MdCurrentComponent',
  layout: 'dynamic',
  data () {
    return {
      swiperInfo: [
        { img: require('@/assets/img/dynamic/original.jpeg') },
        { img: require('@/assets/img/dynamic/original.jpeg') },
        { img: require('@/assets/img/dynamic/original.jpeg') },
        { img: require('@/assets/img/dynamic/original.jpeg') }
      ],
      search: {
        title: '',
        category: '1', // 产品类型（1新品 2往期 3体验）
        pageIndex: 1,
        pageSize: 12
      },
      infoLoading: false,
      productData: [],
      productTotal: 0,
      flag: false,
      dialogInfo: {
        userId: '',
        productId: '',
        status: '2' // 待审核
      }
    }
  },
  mounted () {
    this.getProductInfo()
  },
  methods: {
    async handleApply (item) {
      const user = this.$local.getItem('user')
      this.dialogInfo.userId = user.userId
      this.dialogInfo.productId = item.productId
      if (user) { // 已经登录
        const res = await this.$axios.get(`web/userExperiencer/check/apply/${user.userId}`)
        if (res.code == 200) {
          if (res.data) { // 已经申请过，提示申请理由
            // this.$message.warning('you applied!')
            this.flag = true
          } else { // 没申请跳转到 申请页
            let u = `/experiencer/apply?path=${this.$route.path}`
            if (this.$getParamsStr(this.$route.query)) {
              u += `&${this.$getParamsStr(this.$route.query)}`
            }
            this.$router.push(u)
          }
        }
      } else {
        this.$router.push({
          path: '/login',
          query: {
            turnBackPath: location.href
          }
        })
      }
    },
    async getProductInfo () {
      this.infoLoading = true
      const res = await this.$axios.post('web/product/listPage', this.search)
      this.infoLoading = false
      if (res.code == 200) {
        this.productData = res.data.items.map(item => {
          return {
            ...item,
            picture: JSON.parse(item.picture)
          }
        })
        this.productTotal = res.data.totalItems
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.md-current {
  width: 100%;
  background: #fff;
  .md-swiper-box {
    width: 100%;
  }
  .md-goods-info-box {
    width: 100%;
    display: flex;
    justify-content: center;
    background: #f5f5f5;
    .md-goods-info-list {
      width: 100%;
      max-width: 1200px;
      padding-top: 20px;
      .md-goods-info-item {
        width: 100%;
        min-height: 350px;
        margin-bottom: 15px;
        border-radius: 6px;
        overflow: hidden;
        background-color: #fff;
        display: flex;
        align-items: center;
        padding: 30px;
        box-sizing: border-box;
        &:hover {
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
          transform: translate3d(0, -2px, 0);
        }
        .item-left {
          width: 50%;
          margin-right: 30px;
        }
        .item-right {
          width: calc(50% - 100px);
          color: #414141;
          display: flex;
          flex-direction: column;
          align-items: center;
          .item-title {
            @include block-ell(2);
            font-size: 28px;
            margin-bottom: 30px;
          }
          .item-description {
            color: #666;
            font-size: 16px;
            margin-bottom: 30px;
            line-height: 1.5;
          }
          .tag-box {
            width: 70%;
            margin-bottom: 20px;
            ul {
              margin-bottom: 10px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              li.free-trial {
                background: $md-primary-color;
                cursor: pointer;
                a {
                  color: #fff !important;
                }
              }
              li {
                width: 30%;
                height: 30px;
                line-height: 30px;
                text-align: center;
                border-radius: 2px;
                font-size: 14px;
                color: #fff;
                background: rgba(0, 0, 0, 0.4);
              }
            }
            .total-num {
              height: 30px;
              line-height: 30px;
              text-align: center;
              border-radius: 2px;
              font-size: 14px;
              color: #fff;
              background: rgba(0, 0, 0, 0.4);
            }
          }
          .item-countdown {
            font-size: 20px;
          }
        }
      }
    }
  }
}
.pages {
  width: 100%;
  text-align: center;
  margin: 20px 0;
  ::v-deep .el-pagination {
    .el-pagination__total,
    .el-pagination__jump {
      font-size: 14px;
      color: #4e5969;

      .el-input {
        height: 32px;
        input {
          height: 32px;
        }
      }
    }

    .el-pager {
      .number {
        padding: 0px;
        width: 32px;
        min-width: auto;
        height: 32px;
        line-height: 32px;
        border: 1px solid #d3d3d3;
        border-radius: 4px;
        font-size: 14px;
        font-weight: normal;
        color: #4e5969;
        margin-right: 8px;
        &:last-child {
          margin-right: 0px;
        }
      }
    }

    .btn-prev,
    .btn-next {
      border: 1px solid #d3d3d3;
      border-radius: 4px;
      padding: 0px;
      width: 32px;
      min-width: auto;
      height: 32px;
    }

    .btn-prev {
      margin-right: 8px;
    }

    .btn-next {
      margin-left: 8px;
    }
  }
}
</style>
